<template>
  <div>

    <!-- 登录消息 -->
    <div style="width: 100vw;height: 100px;display: flex">
      <span style="width: 100vw;height: 100px;text-align: center;display: flex;align-items: center;justify-content: center;font-size: 30px">欢迎{{this.$route.params.username}}登录成功</span>
    </div>

    <!-- 各类型事件列表 -->
    <div>
      <el-button v-for="(item,index) in operationList" :key="index" @click="clickOperation(item.title)">{{item.title}}</el-button>
      <el-button @click="dialogShow = true">事件上报</el-button>
      <el-button @click="dialogBpmnShow = true">生成流程图</el-button>
    </div>

    <!-- 事件窗口 -->
    <el-dialog title="事件上报" center :visible="dialogShow" @close="dialogShow = false">
      <el-form :model="event" label-width="100px">
        <el-form-item label="事件名称">
          <el-input v-model="event.eventName" placeholder="请输入事件名称" />
        </el-form-item>
      </el-form>
    </el-dialog>


    <!-- 生成流程图文件 -->
    <el-dialog title="生成流程图" center :visible="dialogBpmnShow" @close="dialogBpmnShow = false">
      <FileUpload ref="fileUpload" :limit="upload.limit" :listType="upload.listType" :accept="upload.accept" ></FileUpload>
      <el-button @click="look">查看</el-button>
      <el-button @click="submit">提交</el-button>
      <el-input v-model="one">参数</el-input>
      <el-button @click="sum">加法</el-button>

    </el-dialog>


    <!-- 登出按钮 -->
    <div>
      <el-button @click.native="clickLogout">登出</el-button>
    </div>

  </div>
</template>

<script>

import FileUpload from '@/components/fileupload/index.vue'

export default {
  name: "Home",
  components:{
    FileUpload
  },
  data(){
    return{
      /* 上传图片配置 */
      upload: {
        limit: 3,
        listType: "picture-card",
        accept: ".jpg"
      },
      /* 事件 */
      event:{
        eventName: null,
      },
      /* 操作列表 */
      operationList: [
        {
          title: "上报事件列表"
        },
        {
          title: "待办事件列表"
        },
        {
          title: "办理事件列表"
        },
        {
          title: "超时事件列表"
        }
      ],
      username: null,
      /* 事件上报窗口 */
      dialogShow: false,
      /* 事件上报 */
      dialogCloe: false,
      /* 生成流程图 */
      dialogBpmnShow: false,
      one: null,
    }
  },
  mounted() {
    /* 取消验证 */
    // if(this.$route.params.username == null || this.$route.params.username == undefined){
    //   this.$router.push('/login')
    //   this.$message.error("登录时间已过期，请重新登录")
    // }
    this.$router.push("/test")
  },
  methods:{

    sum(){
      console.log(eval(eval(this.one) + 8))
    },

    /* 点击操作 */
    clickOperation(val){
      console.log(val)
    },

    /* 登出操作 */
    clickLogout(){
      this.$router.push('/')
    },

    look(){
      this.$nextTick(()=>{
        this.$refs.fileUpload.look();
      })
    },

    submit(){
      this.$nextTick(()=>{
        this.$refs.fileUpload.clickUpload();
      })
    },

  }
}
</script>

<style scoped>

</style>